<template>
    <view class="cancellation">
        <view class="title">在您向我们申请注销账号之前，为保障您的账号安全和相关权益，请你先完整阅读并同意以下协议：</view>
        <view class="content">
            <rich-text :nodes="node"></rich-text>
        </view>
        <checkbox-group @change="radioChange">
            <label class="agree">
                <view>
                    <checkbox :color="$i18n.locale === 'zh' ? '#77c25a': '#00be5f'" style="transform:scale(0.7);" :checked="agreeChecked" />
                </view>
                <view>我已阅读并同意《新视界香港账号注销协议》</view>
            </label>
        </checkbox-group>
        <view class="register-check font-30" :class="[$i18n.locale]" @tap="next">下一步</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                node: '',
                title: '',
                agreeChecked: false,
                agreeValue: ''
            }
        },
        onLoad() {
            this.getContent()
        },
        methods: {
            getContent() {
                this.$http("post|api/Article/regulation", {
                    id: 13
                }).then(res => {
                    this.node = res.result.topic_content;
                    this.title = res.result.topic_title;
                    uni.setNavigationBarTitle({
                        title: this.title
                    });
                })
            },
            radioChange(e) {
                this.agreeChecked = !this.agreeChecked
            },
            next() {
                if (!this.agreeChecked) {
                    this.$toastApp('请阅读并同意注销协议')
                    return
                }
                uni.navigateTo({
                    url: '/my/cancellation/cancellation-confirm'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cancellation {
        padding: 30rpx;
    }

    .title {
        font-size: 28rpx;
        margin-bottom: 20rpx;
    }

    .content {
        font-size: 24rpx;

    }

    .agree {
        display: flex;
        font-size: 24rpx;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;
    }

    .register-check {
        width: 658rpx;
        height: 90rpx;
        border-radius: 45rpx;
        line-height: 90rpx;
        text-align: center;
        margin: 0 auto;
        margin-top: 20rpx;
        color: #ffffff;

        &.zh {
            background: var(--theme);
        }

        &.hk {
            background: var(--themeHK);
        }
    }
</style>
